<template>
  <div class="">
    <!-- <button @click="add1">
      add1
    </button> -->
  </div>
</template>
<script>
/**
 * problem2
 *   时钟问题
 *  描述：  设置一个周期时间，周期内每一个 单位时间 更改一个数字，同时监听数字变化，取余出的数字分别执行不同操作
 */
export default {
  name: 'TicTok',
  props: {
    // 周期
    baseTime: {
      type: Number,
      default() {
        return 500;
      }
    },
    // 程序执行完等待次数
    waitTimes: {
      type: Number,
      default() {
        return 1;
      }
    },
    // 5个步骤的运行方法
    t0: {
      type: Function,
      default() {
        return ()=>{};
      }
    },
    t1: {
      type: Function,
      default() {
        return ()=>{};
      }
    },
    t2: {
      type: Function,
      default() {
        return ()=>{};
      }
    },
    t3: {
      type: Function,
      default() {
        return ()=>{};
      }
    },
    t4: {
      type: Function,
      default() {
        return ()=>{};
      }
    }
  },
  data() {
    return {
      time: -1,
      flag: false,
      programStatus: -1,
    };
  },
  computed: {
    unitTime() {
      return parseInt(this.baseTime/this.totalTimes);
    },
    totalTimes() {
      return this.waitTimes + 5;
    }
  },
  watch: {
    time(newTime) {
      let times = newTime % this.totalTimes;
      if (times >= this.waitTimes) {
        // console.log(`将执行 t${times}`);
        this.programStatus = times;
        this[`t${times - this.waitTimes}`]();
      } else {
        this.programStatus = -1;
        // console.log(`等待中`);
      }
    }
  },
  beforeDestroy() {
    this.flag = false;
  },
  methods: {
    init() {
      this.flag = true;
      this.add1();
    },
    async add1() {
      if (!this.flag) return;
      await this.sleep(this.unitTime);
      this.time++;
      return this.add1();
    }
  }
};
</script>